<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title >首页</title>
</head>
<body>
    <h1>首页</h1>

    <form th:action="@{/testRequestBody}" method="post">
        用户名：<input type="text" name="username"> <br>
        密码：<input type="password" name="password"> <br>
        <input type="submit" value="提交"> <br>
    </form>

    <form th:action="@{/testRequestEntity}" method="post">
        用户名：<input type="text" name="username"> <br>
        密码：<input type="password" name="password"> <br>
        <input type="submit" value="提交"> <br>
    </form>
<!--    <div th:text="${username}">1safdsaf23</div>-->
    <a th:href="@{/testResponse}">测试testResponse</a> <br>
    <a th:href="@{/testResponseBody}">testResponseBody</a> <br>
    <a th:href="@{/testResponseUser}">testResponseUser</a> <br>
    <div id="app">
        <button th:href="@{/testAxios}" @click="testAxios">ajax</button>

    </div>

<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>

    <script type="text/javascript">

        new Vue({
            el:"#app",
            methods:{
                testAxios : function (event) {
                    let url = event.target.getAttribute("href");
                    console.log(url);
                    axios({
                        method:"post",
                        url:url,
                        params:{
                            username:"admin",
                            password:"123456"
                        }
                    }).then(function (response) {
                        console.log(response)
                    }).catch(function (error) {
                        console.log(error)
                    })
                }
            }

        })

    </script>
</body>
</html>